<ng-container card-body-head>
  <m-list-header [taskStatusList]="taskStatusList" (optionChange)="forwardOption($event)"></m-list-header>
</ng-container>

<m-data-table *ngIf="result$ | async as result" [selection]="selection" [data]="result.list" [result]="result" #table>
  <ng-container mDataTableColumn header="任务类型">
    <ng-template let-type="type" let-id="id" let-j="jobs[0]">
      <td>{{ type | taskType }}</td>
    </ng-template>
  </ng-container>
  <ng-container mDataTableColumn header="区域数量">
    <ng-template let-area_count="jobs[0].area_count">
      <td>{{ area_count }}</td>
    </ng-template>
  </ng-container>
  <ng-container mDataTableColumn header="任务时间属性">
    <ng-template let-period_type="jobs[0].period_type">
      <td>{{ period_type | taskPeriodType }}</td>
    </ng-template>
  </ng-container>
  <ng-container mDataTableColumn header="创建人">
    <ng-template let-admin="admin">
      <td>
        <a *ngIf="admin">
          {{ admin.full_name }}
        </a>
      </td>
    </ng-template>
  </ng-container>
  <ng-container mDataTableColumn header="创建时间">
    <ng-template let-created_at="created_at">
      <td>{{ created_at | date }}</td>
    </ng-template>
  </ng-container>
  <ng-container mDataTableColumn header="执行时间">
    <ng-template let-start_at="jobs[0].start_at">
      <td>{{ start_at | date }}</td>
    </ng-template>
  </ng-container>
  <ng-container mDataTableColumn header="执行状态">
    <ng-template let-job_status="jobs[0].status">
      <td>{{ job_status | taskStatus }}</td>
    </ng-template>
  </ng-container>
  <ng-container mDataTableColumn header="执行进度">
    <ng-template let-job="jobs[0]" let-unit="type">
      <td>
        <div class="progress m-progress--sm">
          <div class="progress-bar m--bg-brand" [style.width]="job.finish / job.total | percent"></div>
        </div>
        {{ job.finish }}{{ unit | taskReplyUnit }} / {{ job.total }}{{ unit | taskReplyUnit }}
      </td>
    </ng-template>
  </ng-container>
  <ng-container mDataTableColumn header="操作">
    <ng-template let-id="id" let-job="jobs[0]" let-period_type="period_type">
      <td>
        <button mat-icon-button [matMenuTriggerFor]="editMenu">
          <mat-icon>edit</mat-icon>
        </button>
        <mat-menu #editMenu>
          <button mat-menu-item (click)="goDetail(id, id)">
            详情
          </button>
          <button *ngIf="job.status == taskStatus.Running || job.status == taskStatus.Waiting" mat-menu-item
            (click)="pauseTask([job.id])">
            暂停
          </button>
          <button *ngIf="job.status == taskStatus.Pause" mat-menu-item (click)="resumeTask([job.id])">
            继续
          </button>
          <button *ngIf="canCancel(job)" mat-menu-item (click)="cancelTask([job.id])">
            取消
          </button>
        </mat-menu>
      </td>
    </ng-template>
  </ng-container>
  <m-pagination [length]="result.total" [pageSize]="result.pageSize">
    <button *ngIf="supportBatch" class="btn btn-sm btn-secondary mr-3"
      (click)="selection.select(result.list)">全选</button>
    <button *ngIf="supportBatch" class="btn btn-sm btn-secondary" [matMenuTriggerFor]="batchMenuRef">批量操作</button>
    <mat-menu #batchMenuRef>
      <button mat-menu-item (click)="batchPause()">暂停</button>
      <button mat-menu-item (click)="batchResume()">继续</button>
      <button mat-menu-item (click)="batchCancel()">取消</button>
    </mat-menu>
  </m-pagination>
</m-data-table>